@prefix: ~'progress';
@indicator: 8px;

.@{prefix} {
  display: flex;
  align-items: center;
  width: 100%;
  &-command {
    position: relative;
    flex: 1;
    height: @indicator / 2;
    margin: 0 10px;
    background-color: var(--background-darken);
    border-radius: 4px;

    .avtive() {
      height: @indicator;
      .@{prefix}-command--indicator {
        > button {
          display: block;
        }
      }
    }

    &:hover {
      .avtive();
    }
    &-active {
      .avtive();
    }
    &--indicator {
      position: relative;
      width: 0;
      height: 100%;
      background-color: var(--base-color);
      border-radius: 8px;

      > button {
        position: absolute;
        top: -2px;
        right: -6px;
        display: none;
        width: 12px;
        height: 12px;
        padding: 0;
        cursor: grab;
        user-select: none;
        background-color: white;
        border: 1.5px solid var(--base-color);
        border-radius: 50%;
        &:focus {
          outline: none;
        }
      }
    }
  }
}

.@{prefix}-tip {
  min-width: 40px;
  text-align: center;
}
